<template>
  <div class="BusinessClassificationList app-main-content-box">
    <el-button type="primary" @click="handleAdd">新增分类</el-button>
    <table-panel :table-head="tableHead" :table-data="list">
      <template #opr="{ scope }">
        <el-button type="text" @click="handleEdit(scope)">编辑</el-button>
        <span style="color: red" @click="handleDel(scope)">删除</span>
      </template>
      <div slot="footer" class="footer">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="params.pageSize"
          :current-page="params.page"
          @current-change="handlePageChange"
        />
      </div>
    </table-panel>
  </div>
</template>

<script>
import TablePanel from '@/components/TablePanel'
import {
  addBusinessClassification,
  deleteBusinessClassification,
  getBusinessClassificationList,
  updateBusinessClassification
} from '@/publicApi/BusineCenter'
export default {
  name: 'BusinessClassificationList',
  components: { TablePanel },
  props: {
    business: Object
  },
  data() {
    return {
      tableHead: [
        { label: '分类名称', prop: 'name' },
        { label: '门店数', prop: 'shopNumber' },
        { label: '更新时间', prop: 'updateTime' },
        { label: '操作', prop: 'opr', type: 'custom' }
      ],
      list: [],
      total: 0,
      hasNextPage: false,
      params: {
        pageSize: 10,
        page: 1
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.params.pubDomainBusinessId = this.business.id
      const { code, data } = await getBusinessClassificationList(this.params)
      if (code === 0) {
        const { list, hasNextPage, total } = data
        this.list = list
        this.hasNextPage = hasNextPage
        this.total = total
      }
    },
    handlePageChange(e) {
      this.params.page = e
      this.getList()
    },
    handleAdd() {
      this.$prompt('', '新增分类', {
        inputPlaceholder: '请输入分类',
        confirmButtonText: '保存',
        cancelButtonText: '取消',
        inputValidator: (val) => !!val && val.length <= 4,
        inputErrorMessage: '分类必填且分类长度不能超过4个字符'
      }).then(async({ value }) => {
        const { code } = await addBusinessClassification({
          name: value,
          pubDomainBusinessId: this.business?.id
        })
        if (code === 0) {
          this.$message({
            type: 'success',
            message: '新增成功'
          })
          this.params.page = 1
          this.$nextTick(() => {
            this.getList()
          })
        }
      })
    },
    handleEdit(row) {
      this.$prompt('', '编辑分类', {
        inputValue: row?.name,
        inputPlaceholder: '请输入分类',
        confirmButtonText: '保存',
        cancelButtonText: '取消',
        inputValidator: (val) => !!val && val.length <= 4,
        inputErrorMessage: '分类必填且分类长度不能超过4个字符'
      }).then(async({ value }) => {
        const { code } = await updateBusinessClassification({
          ...row,
          name: value,
          pubDomainBusinessId: this.business?.id
        })
        if (code === 0) {
          this.$message({
            type: 'success',
            message: '编辑成功'
          })
          await this.getList()
        }
      })
    },
    handleDel(row) {
      this.$alert('是否确定删除分类？', '提示', {
        type: 'error',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        callback: async(res) => {
          console.log(res)
          if (res === 'confirm') {
            const { code } = await deleteBusinessClassification({
              ...row,
              pubDomainBusinessId: this.business?.id
            })
            if (code === 0) {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              await this.getList()
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.BusinessClassificationList {
  /deep/.el-button {
    padding: 12px 20px;
  }
}
</style>
